<template>
	<!-- 使用页面滚动的列表 -->
	<view class="uni-flex uni-column uni-margin-warp uni-common-mt comment-page" style="background-color: rgb(32, 32, 32); border: 1rpx solid rgb(32,32 32); border-radius: 8rpx;">
		<view v-for="item,index in commentList" :key="index">
			<view class="comment-chat-bg uni-flex uni-row uni-padding-warp uni-common-mt" style="position: relative;">
				<text style="font-weight: bold; color: gray; font-size: 26rpx;">{{item.username}}</text>
				<text style="color: gray; font-size: 26rpx;">（{{item.time}}）</text>
				<text style="color: gray; font-size: 26rpx; right: 15rpx; position: absolute;">#{{item.floor}}</text>
			</view>
			<view style="padding: 10rpx 25rpx 0rpx 25rpx;">
				<text class="age-content-title" style="word-wrap: break-word;" v-html="item.content"></text>
				<view style="border-bottom: 1rpx solid gray; margin-top: 25rpx;"></view>
			</view>
		</view>
		<ageloading v-show="isshowing"></ageloading>
		<uni-load-more :status="loadstatus" @clickLoadMore="loadData(false)" icon-type="auto" :content-text="contentText"></uni-load-more>
	</view>
</template>

<script>
	import ageloading from "../component/loading/age-loading.vue"
	export default {
		components: {
			ageloading
		},
		data() {
			return {
				aid: "",
				page: 1,
				commentList: [],
				// 评论总数
				totalPage:0,
				isshowing: true,
				loadstatus:'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				ispullup: false
			}
		},
		methods: {
			// ispulldown 是否是下来刷新
			// true 下拉刷新; false 上拉加载
			loadData(ispulldown) {
					
				if( ispulldown == false ) {
					this.page++
					if(this.loadstatus == 'nomore') {
						return
					}
				} else {
					this.page = 1
				}
				this.loadstatus = 'loading'
				const vm = this
				// https://ageapi.omwjhz.com:18888
				var url = vm.$myGlobalUrl + `/v2/comment/${vm.aid}/?page=${vm.page}`
				console.log(url)
				uni.request({
					url:url,
					success(res) {
						console.log(res.data)
						const data = res.data['data']
						
						vm.totalPage = data['pagination']['totalPage']
							
						if(ispulldown) {
							vm.commentList = data['comments']
						} else {
							//concat添加一个数组的全部元素到该数组
							vm.commentList = vm.commentList.concat(data['comments'])
						}
						console.log(vm.commentList)
						if (vm.page == vm.totalPage) {
							vm.loadstatus = 'nomore'
						} else {
							vm.loadstatus = 'more'
						}
						
						uni.stopPullDownRefresh()
						vm.isshowing = false
					},
					fail() {
						uni.showToast({
							title: '数据请求失败！'
						})
						vm.isshowing = false
						uni.stopPullDownRefresh()
					}
				})
			}
		},
		onLoad(option) {
			console.log(option.id)
			this.aid = option.id
		},
		mounted() {
			this.loadData(true)
		},
		onPullDownRefresh() {
			this.loadData(true)
		},
		onPageScroll(e) {
			// 监听页面滚动，变更加载状态
			// console.log(e)//{scrollTop: 358}
			// #ifndef APP-NVUE
				var scrollTop = e["scrollTop"]
				// 获取当前页面的实例对象
				const page = getCurrentPages()[getCurrentPages().length - 1];
				// 创建选择器查询对象
				const query = uni.createSelectorQuery();

				// 选择当前View元素
				query.select('.comment-page').boundingClientRect();
				
				// 执行查询并获取结果
				query.exec((res) => {
					const viewHeight = res[0].height;
				  // console.log('当前View高度为：', viewHeight);
					console.log('当前差值为：', viewHeight-scrollTop);
				  //590 静止时的差值
					if ((viewHeight - scrollTop) < 540) {
						if (this.ispullup) {
							return
						}
						this.ispullup = true;
						setTimeout(() => {
							this.ispullup = false;
						},2000)
						this.loadData(false)
					}
				});
			// #endif
				console.log('非APP端')
		}
	}
</script>

<style>

</style>
